import { Button, Card, Space, Input } from "antd";
import { ConfigDef } from "./config";
import { min_app_shell } from '@linksaas-minapp/api';
import { useEffect, useState } from "react";

export interface EditParamProps {
    cfgDef: ConfigDef;
    value: unknown;
    onChange: (newValue: unknown) => void;
    onRemove: () => void;
}

export default function EditParam(props: EditParamProps) {
    const [paramValue, setParamValue] = useState(JSON.stringify(props.value, null, 2));
    const [hasChange, setHasChange] = useState(false);
    const [errStr, setErrStr] = useState<string | null>(null);

    useEffect(() => {
        setParamValue(JSON.stringify(props.value, null, 2));
    }, [props.value]);

    return (
        <Card title={props.cfgDef.id} style={{ marginBottom: "10px" }} extra={
            <Space>
                <Button type="link" onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    min_app_shell.openBrowser(props.cfgDef.url);
                }}>查看详情</Button>
                <Button danger onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    props.onRemove();
                }}>删除属性</Button>
            </Space>
        }>
            <p>{props.cfgDef.descCn}</p>
            <p>{props.cfgDef.descEn}</p>
            <p>默认配置:&nbsp;{JSON.stringify(props.cfgDef.defaultValue)}</p>
            {props.cfgDef.demoValue != undefined && (
                <p>配置样例:&nbsp;{JSON.stringify(props.cfgDef.demoValue)}</p>
            )}
            <Input.TextArea rows={5} value={paramValue} onChange={e => {
                e.stopPropagation();
                e.preventDefault();
                setParamValue(e.target.value);
                setHasChange(true);
                try {
                    const value = JSON.parse(e.target.value);
                    const err = props.cfgDef.validValue(value);
                    setErrStr(err);
                } catch (e) {
                    setErrStr(`${e}`);
                }
            }} />
            {hasChange == true && (
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "10px" }}>
                    <Space>
                        {errStr != null && (
                            <span style={{ color: "red" }}>{errStr}</span>
                        )}
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            setParamValue(JSON.stringify(props.value, null, 2));
                            setErrStr(null);
                            setHasChange(false);
                        }}>取消</Button>
                        <Button type="primary" disabled={errStr != null} onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            try {
                                const value = JSON.parse(paramValue);
                                const err = props.cfgDef.validValue(value);
                                if (err != null) {
                                    setErrStr(err);
                                    return;
                                }
                                setErrStr(null);
                                props.onChange(value);
                                setHasChange(false);
                            } catch (e) {
                                setErrStr(`${e}`);
                            }

                        }}>保存</Button>
                    </Space>
                </div>
            )}
        </Card>
    );
}